<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
        节点的增删改操作
        1. 如何动态的创建节点
        2. 如何将节点对象添加到指定为止
        3. 如何删除指定位置的节点
        4. 如何实现节点的替换
-->
<ul id="course">
    <li id="cs">CSS</li>
    <li>HTML</li>
</ul>

<script>

    // 获取父元素节点对象
    var ul = document.getElementById('course');
    // 创建子节点对象  li
    var li = document.createElement('li');
    console.log(li)

    //添加内容到li  创建文本节点
    // var text = document.createTextNode('Java');
    // li.appendChild(text)
    li.innerText = 'Java'

    // 添加子节点  父节点中追加子节点
    // ul.appendChild(li)

    // 添加元素到指定元素的前面
    var  before = document.getElementById('cs')
    ul.insertBefore(li,before)

    // 删除子节点
    // ul.removeChild(before)

    // 替换节点
    var  jsEle = document.createElement("li")
    jsEle.innerText = 'JavaScript'

    ul.replaceChild(jsEle,before)



</script>
</body>
</html>